<template>
	<view class="m-room">
		<view class="m-room-default-box" v-if="gameMode=='room'">
			<view class="change-people flex-row-start-center" v-if="roomType=='default'">
				<view class="heart-icon" @click="handleJumpMain">
					<image class="heart-icon-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c49ae88f2c0340bebc08d0690b1115b4.png"
						mode="aspectFill"></image>
					<view class="heart-num">24</view>
				</view>
				<view class="name-box" @click="handleJumpMain">米娜
					<view class="line-box"></view>
				</view>
				<view class="change-people-icon" @click="handleChangePeopleClick">
					<image class="change-people-icon-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/947bee2d67494c37946acb9d1988e42b.png"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="room-btn leave-btn" v-if="roomType=='default'" @click="handleGoRoom"
				:class="{'room-btn-active':roomBtnClicked}">
				<view class="room-btn-content flex-row-center-end">
					<image class="room-btn-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/24d2b141b733493fbd7c1f2b900d2fdd.png"
						mode="aspectFill"></image>
					<view class="room-text">大厅</view>
				</view>
				<view class="room-btn-line">
					<view class="room-btn-line-content"></view>
				</view>
				<image class="room-btn-fast-icon"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5732440ddf8642799d477ef01a56a872.png"
					mode="aspectFill"></image>
			</view>


			<view class="bottom-btn" v-if="roomType=='default'">
				<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
					<view class="btn-item" v-for="(item,index) in bottomBtnList"
						@click="handleBottomBtnClick(item,index)" :key="index">
						<view class="btn-item-content">
							<view class="icon">
								<image class="icon-img" :class="{'bling':isLiving&&item.type=='live'}" :src="item.icon"
									mode="aspectFill">
								</image>
							</view>
						</view>
						<view class="locked-masker" v-if="item.locked">
							<image class="locked-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
								mode="aspectFill"></image>
						</view>

					</view>
				</scroll-view>
			</view>
		</view>

		<view class="m-room-box-new" v-if="gameMode=='room-private'">
			<view class="room-top-info flex-row-start-center"
				:style="{'top':topInfoTop+'rpx','z-index':isStartGame?-1:999}" v-if="myRoleCard">
				<view class="top-info-avatar" @click.stop="handleJumpMain">
					<image class="cover-img top-info-avatar-img" :src="myRoleCard.photoUrl" mode="aspectFill"></image>
					<view class="info-heart-icon">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1967c24a13564a45975e2af8ff5f010d.png"
							mode="aspectFill"></image>
						<view class="heart-num flex-row-center-center" v-if="heartInfo">
							{{heartInfo.level}}
						</view>
					</view>
				</view>
				<viw class="top-info-content flex-column-center-center">
					<view class="top-info-name flex-row-start-center">
						<text class="top-info-name-text" @click.stop="handleJumpMain">{{myRoleCard.cardName}}</text>

					</view>
					<view class="top-info-heart-num flex-row-start-end" v-if="heartInfo">
						<view class="info-heart-progress" @click.stop="handleJumpMain">
							<view class="heart-progress-inner" :style="{width:heartProgressPercent+'%'}"></view>
							<view class="heart-progress-text flex-row-start-center">
								<text
									style="margin-right: 6rpx;">Lv.{{heartInfo.level}}</text><text>({{heartInfo.value}}/{{heartInfo.levelValue}})</text>
							</view>
						</view>
					</view>
				</viw>


			</view>



			<view class="pk-sort-btn flex-row-start-center" :style="{top:sortBtnTop+'rpx'}" v-if="false">
				<view class="pk-sort-icon">
					<image class="cover-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/717576875430439e8a6249c4737e93f1.png"
						mode="aspectFill"></image>
				</view>
				<view class="pk-sort-btn-list">
					<view class="sort-btn-item flex-row-center-center">小时榜</view>
				</view>
			</view>

			<view class="input-fly-box flex-row-start-center" :style="{bottom:keyboardHeight+'rpx',opacity:1}"
				@click.stop>
				<view class="fly-input-box flex-row-start-center">
					<input ref="inputRef" :adjust-position="false" v-model="inputMsg" type="text" :focus="inputIsFocus"
						@focus="inputFocus" @blur="inputBlur" @confirm="inputConfirmMessage"
						placeholder-style="color:#b9b9b9;" placeholder="说点什么..." confirm-type="send"
						class="fly-input-control flex-row-start-center"
						@keyboardheightchange="handleKeyBoardHeightChange" />
				</view>
				<view class="send-btn flex-row-center-center" :class="{'empty-value':!inputMsg}"
					@click="inputConfirmMessage">发送</view>
			</view>

			<view class="pk-functions-box flex-row-start-center" v-if="!isStartGame">
				<view class="pk-btns flex-row-start-center">
					<view class="pk-btn-item flex-row-center-center"
						:class="{'pk-input':item.key=='input','start-game':item.key=='start-game','hide-function-btn':item.hide}"
						v-for="(item,index) in gameOutsideBtns" :key="index" @click="handlePkBtnsClick(item,index)">

						<view class="pk-btn-item-default flex-row-center-center"
							v-if="item.key!='input'&&item.key!='start-game'">
							<image class="pk-btn-item-icon" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="input-control flex-row-start-center" v-if="item.key=='input'">
							说点什么...
						</view>
						<view class="start-game-content flex-row-center-center" v-if="item.key=='start-game'">
							<image class="pk-btn-item-icon" :src="item.image" mode="aspectFill"></image>
							<text class="start-game-content-text">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>




			<view class="pk-video-box" :class="{'pk-show':isStartGame}">
				<m-video ref="pkVideo" :storyId="storyId+'pk'" :storyUrl="pkVideoUrl" :selfLoop="true" :loopSec="-1"
					:showProgress="false" @onEnded="onEnded" @onTimeUpdate="onTimeUpdate" @onPlay="onPlay"
					useType="alone">
				</m-video>
			</view>
			<view class="pk-component" :class="{'pk-show':isStartGame}" :style="{'z-index':isStartGame?11:-1}">
				<mFunGame ref="mFunGame" :duration="duration" :currentTime="currentTime" :useGameMode="pianoGameMode"
					@getGameResult="handleFunGameResult" @pauseVideo="pauseVideo" @playVideo="playVideo"
					@jumpBack="handleFunGameJumpBack">
				</mFunGame>
			</view>


		</view>
		<view class="base-tip-box flex-row-center-center" v-if="showTip">{{tipText}}</view>


		<mModal ref="mModal" @result="handleModalResult"></mModal>
		<mGiftPop ref="mGiftPop"></mGiftPop>
		<mPop ref="mPop" :popHeigh="popHeightNew" :maskCloseAble="maskCloseAble">
			<view class="room-pop flex-column-center-center" v-if="this.gameMode=='room'">
				<view class="girls-control-list">
					<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
						<view class="girl-fragment-item" :class="{'act-girl-fragment':actGirlFragMentIndex== index}"
							v-for="(item, index) in fDataList" :key="index" @click="handlePopItemClick(item,index)">
							<view class="item-content">
								<image class="item-image" :class="{'btnClickScale':actGirlFragMentIndex==index}"
									:src="item.image" mode="widthFix"></image>
							</view>
							<view class="name">{{item.name}}</view>

							<view class="locked-masker" v-if="item.locked">
								<image class="locked-icon"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cb0549e505a44eb090baa6fd92db7792.png"
									mode=""></image>
							</view>

							<view class="dressuped-icon" v-if="item.isDefault&&roomType=='dressup'">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6461cc205bf4e968bbb6f50728daf23.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="pop-bottom-btns flex-row-center-center" v-if="roomType=='dressup'">
					<view class="pop-btn-item flex-row-center-center" :class="{'pop-btn-dressed':actPopItem.isDefault}"
						@click="handleDressUpClothes">
						{{popBtnText}}
					</view>
				</view>



			</view>
			<view class="room-private-pop" v-if="gameMode=='room-private'">
				<view class="room-more-pop flex-column-start-center pop-default" v-if="popType=='more'">
					<scroll-view ref="roomMoreBtnsScrollView" scroll-y class="scroll-content" :show-scrollbar="false"
						:scroll-with-animation="true">
						<view class="more-btn-list flex-row-start-start">
							<view class="more-btn-item flex-row-center-center" v-for="(item,index) in gameMoreBtns"
								:key="index">
								<image class=" more-btn-item-img" :src="item.image" mode="aspectFill"></image>
								<view class="more-btn-item-name">{{item.name}}</view>
							</view>
						</view>
					</scroll-view>
				</view>


				<view class="room-update-pop flex-column-start-center pop-default" v-if="popType=='update'">
					<view class="update-top flex-row-start-end">
						<view class="update-level flex-row-start-end">
							<!-- <view class="update-level-tip">舞力等级：</view> -->
							<view class="update-level-content flex-row-start-end">
								<view class="update-level-icon">Lv.</view>
								<view class="update-level-now">
									<text v-if="dancePowerInfo">{{dancePowerInfo.level}}</text>
									<text v-else>0</text>
								</view>
								<view class="update-level-future">/<text
										v-if="dancePowerInfo">{{dancePowerInfo.levelLimit}}</text><text v-else>0</text>
								</view>
							</view>

						</view>
						<view class="update-progress flex-column-end-center">
							<view class="update-progress-text flex-row-end-center">
								<view class="tip-text">舞力：</view>
								<view class="power-text">
									<text
										v-if="dancePowerInfo">{{dancePowerInfo.value}}/{{dancePowerInfo.levelValue}}</text>
									<text v-else>0/0</text>
								</view>
							</view>
							<view class="update-progress-content flex-row-start-center">
								<view class="update-progress-inner" :style="{width:dancePowerUpdatePercent+'%'}">
								</view>
							</view>

						</view>

					</view>
					<view class="update-card-list">
						<scroll-view :scroll-x="true" style="white-space: nowrap" class="scroll-content"
							:show-scrollbar="false" :scroll-with-animation="true">
							<view class="update-card-list-content flex-row-start-center">
								<view class="update-card-item card-after-before card-farther"
									v-for="(item,index) in cardList" :key="index" :class="{
				  'blue-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'purple-card':item.RarityLevel==3,'colorful-card':item.RarityLevel==4
                }" @click="handleGirlCardItemClick(item,index)">
									<view class="no-choosed-masker" v-if="actGirlCardIndex!==index"></view>
									<view class="dance-girls-item-content  flex-row-center-center">
										<view class="card-level flex-row-start-center">
											<view class="card-level-icon">Lv.</view>
											{{item.level}}
										</view>
										<image class="cover-img" :src="item.image" mode="aspectFill"></image>
										<view class="start-box flex-row-center-center">
											<view class="start-item"
												v-for="(sitem, sindex) in getStartList(item.start, 5)" :key="sindex">
												<image class="start-img" v-if="sitem.active"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
													mode="aspectFill"></image>
												<image class="start-img" v-else
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
													mode="aspectFill"></image>
											</view>
										</view>
										<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
											<image class="cover-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)"
												mode="aspectFill">
											</image>
										</view>
										<view class="bottom-info-new flex-row-center-center">
											<view class="name-box flex-row-center-center">{{ item.name }}</view>
										</view>
										<view class="locked-masker flex-row-center-center" v-if="item.locked">
											<view class="locked-tip flex-row-center-center">未获得</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="update-consume flex-column-start-center">
						<view class="update-consume-tip flex-row-start-center">升级消耗</view>
						<view class="update-consume-content flex-row-start-center">
							<view class="update-conusem-inner">
								<view class="n-reward-list">
									<scroll-view :scroll-x="true" style="white-space: nowrap" class="scroll-content">
										<view class="reward-item" :class="{
								  'green-good': item.RarityLevel == 1,
								  'orange-good': item.RarityLevel == 2,
								  'blue-good': item.RarityLevel == 3,
								  'purple-good': item.RarityLevel == 4,
								}" v-for="(item, index) in updateConsumeList" :key="index">
											<image class="reward-item-icon" :src="item.icon" mode="aspectFill">
											</image>
											<view class="reward-num">{{ item.num }}</view>
										</view>
									</scroll-view>
								</view>

							</view>
							<view class="update-btn-box flex-row-center-center">
								<view class="update-btn-content flex-row-center-center">
									提升一级
								</view>

							</view>


						</view>


					</view>
				</view>


			</view>

		</mPop>
		<!-- 		<mBack ref="mBack">
		</mBack> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions,
	} from "vuex";
	import {
		getMyCardList,
		getCardRoomDetail,
		getMyCardDetail
	} from "@/api/game.js"
	import mModal from './type-modal.vue'
	import mGiftPop from '@/components/m-gift-pop/index.vue'
	import mPop from "@/components/m-pop/index.vue"
	import mVideo from "@/components/m-video/index.vue";
	import mFunGame from "@/components/m-fun-game/index.vue"
	// import mBack from "@/components/m-back/index.vue"
	import {
		getStartList,
		handleReturnRarityLevelUrl
	} from "@/utils/tools.js"
	import {
		isNumber
	} from "util";

	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: "jyxd_player"
			},
			// gameMode: {
			// 	type: String,
			// 	default: "room-private", // room旧的元素  room-private私密模式  room-party派对模式
			// }

		},
		components: {
			mModal,
			mGiftPop,
			mPop,
			mVideo,
			mFunGame,
			// mBack
		},
		computed: {
			...mapGetters(["globalGameCtx", "curStoryId", "currentCardId", 'currentCardData']),
			popBtnText() {
				let isDefault = this.actPopItem.isDefault
				let locked = this.actPopItem.locked
				if (isDefault) {
					return "穿戴中"
				} else if (!isDefault && !locked) {
					return "穿 戴"
				} else if (!isDefault && locked) {
					return "去获取"
				}
			},
			popHeightNew() {
				let height = 0
				if (this.gameMode == 'room') {
					if (this.roomType == 'dressup') {
						// this.popHeight = 360
						height = 360
						this.maskCloseAble = false
						this.handleOpenPop()
					} else if (this.roomType == 'accomplishment') {
						// this.popHeight = 300
						height = 300
						this.maskCloseAble = false
						this.handleOpenPop()
					} else {
						// this.popHeight = 300
						height = 300
						this.maskCloseAble = true
					}
				} else if (this.gameMode == 'room-private') {
					if (this.popType == 'more') {
						height = 500
					} else if (this.popType == 'update') {
						height = 550
					} else {
						height = 500
					}
					this.maskCloseAble = true
				}

				return height

			},
			heartProgressPercent() {
				if (this.heartInfo) {
					let {
						levelValue,
						upgradeValue,
						value
					} = this.heartInfo
					return (((upgradeValue + value) - levelValue) / upgradeValue) * 100
				} else {
					return 0
				}
			},
			dancePowerUpdatePercent() {
				if (this.dancePowerInfo) {
					let {
						levelValue,
						upgradeValue,
						value
					} = this.dancePowerInfo
					return (((upgradeValue + value) - levelValue) / upgradeValue) * 100
				} else {
					return 0
				}
			}
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					// this.handleGetCardList() //测试时使用
					if (newVal === this.storyId) {
						// 新逻辑
						// 请求卡牌列表
						this.handleGetCardList()





						// 旧逻辑
						let storyData = this.globalGameCtx.nextStorySet[newVal]
						console.log("数据是", storyData, newVal);
						this.initialTime = !storyData.initialTime ? 0 : storyData.initialTime
						let sectionsConfig = storyData.sectionsConfig
						this.fDataList = sectionsConfig.map((item, index) => {
							// if (item.sectionStartTime == this.initialTime) {
							// 	this.acIndex = index
							// }
							return {
								name: item.sectionName,
								image: item.coverImgUrl,
								seekTime: item.sectionStartTime,
								roleName: item.roleName,
								isDefault: !item.isDefault ? false : true,
								locked: !item.locked ? false : true,
								storyId: !item.storyId ? "" : item.storyId
							}
						})
						this.fDataList.forEach((item, index) => {
							if (item.isDefault) {
								this.actGirlFragMentIndex = index
								this.actPopItem = item
							}
						})

					}
				},
				deep: true,
				immediate: true
			},
			bottomBtnList: {
				handler(newVal, oldVal) {
					this.popBtnList = this.bottomBtnList.filter((item, index) => {
						return item.needPop
					})
				},
				deep: true,
				immediate: true
			},
			roomType: {
				handler(newVal, oldVal) {
					if (this.gameMode == 'room') {
						if (newVal == 'dressup') {
							this.popHeight = 360
							this.maskCloseAble = false
							this.handleOpenPop()
						} else if (newVal == 'accomplishment') {
							this.popHeight = 300
							this.maskCloseAble = false
							this.handleOpenPop()
						} else {
							this.popHeight = 300
							this.maskCloseAble = true
						}
					}

				},
				deep: true,
				immediate: true
			},
			currentCardData: {
				handler(newVal, oldVal) {
					// &&this.curStoryId == this.storyId
					if (newVal) {
						let {
							actionList,
							myRoleCard
						} = newVal
						this.gameOutsideBtns = actionList
						this.myRoleCard = myRoleCard
						this.heartInfo = myRoleCard.infoJson.kindLevel
						// this.dancePowerInfo = myRoleCard.infoJson.level


						// console.log("拿到的数据是", myRoleCard);


					}
				},
				deep: true,
				immediate: true
			},
			isStartGame: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit('hideBackBtn')
						this.$emit('pauseVideo')

					} else {
						this.$emit('showBackBtn')
						this.$emit('playVideo')
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				// 新模式
				dancePowerInfo: null, //舞力信息
				heartInfo: null, //心动信息
				myRoleCard: null,
				gameMode: "room-private", // room旧的元素  room-private私密模式  room-party派对模式
				topInfoTop: 84,
				chartStoryId: "",
				popType: "update",
				pianoGameMode: "default",
				keyboardHeight: -90,
				inputIsFocus: false,
				inputMsg: "",
				currentTime: 0,
				duration: 0,
				isStartGame: false,
				startGameClicked: false,
				pkVideoUrl: "https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241230/VIDe44ce7fb/VIDe44ce7fb.m3u8",
				gameOutsideBtns: [{
						key: "more",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/876acf2b6b074567b8ac777f2746d6dc.png",
						type: "icon", // icon没有名称 button 有名称
					},
					{
						key: "message",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3c01b6d92f924ee49afcb637896f20b3.png"
					},

					{
						key: "update",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fce814ae8d664c4bbae07df59d6a725a.png"
					},
					{
						key: "gift",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1556a8ca2b954cfd9d00a04f59c67439.png"
					},
					{
						key: "dance",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e3cbdd1121c14524b5c9f32bc805ff90.png"
					},
					{
						key: "prop",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/11df41d2f2574c668378c14b1637283a.png"
					},
					{
						key: "start-game",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b82b26d1197e43759882550a71c26425.png",
						name: "挑战"
					}
				],
				gameMoreBtns: [{
					type: "test",
					name: "测试",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3c01b6d92f924ee49afcb637896f20b3.png"
				}, ],
				sortBtnTop: 100,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				screenWidth: 375,
				actGirlCardIndex: 0,
				actGirlCard: null,
				updateConsumeList: [{
						name: "金币",
						type: "prop",
						num: 10000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/38de7531db5e4be8b8e6cd49dbacb0eb.png",
						isEmpty: false,
						RarityLevel: 1,
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b4487873c4354b26ad8a6146760c0830.png",
						isEmpty: false,
						RarityLevel: 2,
					},

					{
						name: "抽奖券",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6035c864cda949ceaa64ec009d3fcdc9.png",
						isEmpty: false,
						RarityLevel: 3,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/965596a07ce5483481d6aa73455443a1.png",
						isEmpty: false,
						RarityLevel: 4,
					},
				],
				cardList: [],
				// 旧模式
				jumpAccomplishmentStoryId: "",
				maskCloseAble: true,
				actGirlFragMentIndex: 0,
				popHeight: 300,
				roomType: "default", // default默认  dressup装扮  accomplishment才艺
				actPopItem: {
					isDefault: false,
					locked: false,
				},
				// 舞姬主页跳转剧情ID
				jumpGirlMainPageStoryId: "",
				tipText: "敬请期待",
				timestamp: 600,
				isLiving: true,
				tipTimeOutId: null,
				showTip: false,
				fDataList: [{
						name: "火辣秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/71ee11eebf0c4f6d8a1a94368cdce6ba.jpg",
						seekTime: 0,
						roleName: "香奈",
						isDefault: true,
						storyId: "",
						locked: false,
					},
					{
						name: "制服诱惑",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1e9ef7b1cf524c09acb62c202ea4f262.jpg",
						seekTime: 9,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: false,
					},

					{
						name: "清纯可爱",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68075b52d7764ff2b5cf3d8d04856188.jpg",
						seekTime: 17,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "邻家女孩",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/967231e3cd9c42b9886f9f5b3fedd524.jpg",
						seekTime: 27,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "青春活力",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6240f630ff6e493a976dcc255af78b6a.jpg",
						seekTime: 34,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					}, {
						name: "青春活力-测",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6240f630ff6e493a976dcc255af78b6a.jpg",
						seekTime: 34,
						roleName: "香奈",
						isDefault: false,
						storyId: "",
						locked: true,
					},
					{
						name: "古典风",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1da7b3d841564faa919adbbeeb31a11d.jpg",
						seekTime: 43,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,
					},

					{
						name: "足球宝贝",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/52b092eaf7474e90a0144af076637c97.jpg",
						seekTime: 54,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,

					}, {
						name: "兔女郎",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d2d005909c5b44b09f30a83d10083ee2.jpg",
						seekTime: 61,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,
					},

					{
						name: "兔女郎-测",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d2d005909c5b44b09f30a83d10083ee2.jpg",
						seekTime: 61,
						roleName: "咏美",
						isDefault: false,
						storyId: "",
						locked: true,
					},

				],
				roomBtnClicked: false,
				jumpRoomListStoryId: "",
				// 房间列表
				jumpOutStoryId: "",
				// 陪玩
				jumpAccompanyStoryId: "",
				// 约会
				jumpDateStoryId: "",
				// 切换
				jumpChangeStoryId: "",
				// 场景
				jumpSceneStoryId: "",
				// 装扮
				jumpDressUpStoryId: "",
				// 直播
				jumpLiveStoryId: "",
				popBtnList: [],
				bottomBtnList: [{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c36dfac849aa47718ad4868d612ccfc2.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/19ab866ff9df448d90ef1ff1363d9aef.png",
						type: "voice",
						needPop: false,
						name: "语音",
						locked: true,
					},

					// {
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d799619c22ac47e19b3cb13f2fb28846.png",
					// 	type: "text",
					// 	needPop: false,
					// },
					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7b04958f57a04adaa48ee225af66ba93.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e7feaadf724e4d9b961bbf647ce3ef66.png",
						type: "date",
						needPop: false,
						name: "约会",
						locked: true,
					},

					{

						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/54448ca7629148afaee3385815588430.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a6a9c9a5bde433f9824de762a983a28.png",
						type: "accomplishment",
						needPop: true,
						name: "才艺",
						locked: false,
					},
					// {
					// 	// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/202c3c619d79468bb5109540b2ec6a63.png",
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/24a1a6e3f26c4ba8a192fcc4deb82fae.png",
					// 	type: "accompany",
					// 	needPop: true,
					// 	name: "陪玩",
					// 	locked: true,
					// },

					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/202c3c619d79468bb5109540b2ec6a63.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b34707dac164403d84df6f76f379f22b.png",
						type: "dynamics",
						needPop: false,
						name: "动态",
						locked: false,
					},


					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5cd1206224ac44f8bce9da475b77b195.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/367c31cbbefd431fb7380ec013366ec4.png",
						type: "dressup",
						needPop: true,
						name: "装扮",
						locked: false,
					},

					// {
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0b356e80796c4299ba6fb006fa78297a.png",
					// 	type: "live",
					// 	needPop: false,
					// 	name: "直播",
					// 	locked: false,
					// },
					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/aa541fd6c6464860b69925fb0d50be54.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6cd8f717cd3249d3830ecbfe098e45a0.png",
						type: "gift",
						needPop: false,
						name: "礼物",
						locked: false,
					},

				]
			}

		},
		mounted() {
			this.getProps()
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo
				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop
				this.sortBtnTop = rpxHeight + rpxTop

				this.topInfoTop = rpxTop + (rpxHeight - 80) / 2


				// 调用接口获取数据
				this.handleTestGetRoomCardDetail()

			} catch (e) {

			}
		},
		methods: {
			...mapActions(["getRoomCardDetail"]),
			getStartList,
			handleReturnRarityLevelUrl,
			getProps() {
				let paramsJson = this.paramsJson

				this.jumpOutStoryId = paramsJson.jumpOutStoryId && paramsJson.jumpOutStoryId.default ? paramsJson
					.jumpOutStoryId.default :
					this
					.jumpOutStoryId


				this.jumpAccompanyStoryId = paramsJson.jumpAccompanyStoryId && paramsJson.jumpAccompanyStoryId.default ?
					paramsJson
					.jumpAccompanyStoryId.default :
					this
					.jumpAccompanyStoryId

				this.jumpDateStoryId = paramsJson.jumpDateStoryId && paramsJson.jumpDateStoryId.default ? paramsJson
					.jumpDateStoryId.default :
					this
					.jumpDateStoryId

				this.jumpChangeStoryId = paramsJson.jumpChangeStoryId && paramsJson.jumpChangeStoryId.default ? paramsJson
					.jumpChangeStoryId.default :
					this
					.jumpChangeStoryId


				this.jumpSceneStoryId = paramsJson.jumpSceneStoryId && paramsJson.jumpSceneStoryId.default ? paramsJson
					.jumpSceneStoryId.default :
					this
					.jumpSceneStoryId

				this.jumpDressUpStoryId = paramsJson.jumpDressUpStoryId && paramsJson.jumpDressUpStoryId.default ?
					paramsJson
					.jumpDressUpStoryId.default :
					this
					.jumpDressUpStoryId

				this.jumpLiveStoryId = paramsJson.jumpLiveStoryId && paramsJson.jumpLiveStoryId.default ? paramsJson
					.jumpLiveStoryId.default :
					this
					.jumpLiveStoryId

				this.jumpRoomListStoryId = paramsJson.jumpRoomListStoryId && paramsJson.jumpRoomListStoryId.default ?
					paramsJson
					.jumpRoomListStoryId.default :
					this
					.jumpRoomListStoryId

				this.jumpGirlMainPageStoryId = paramsJson.jumpGirlMainPageStoryId && paramsJson.jumpGirlMainPageStoryId
					.default ?
					paramsJson
					.jumpGirlMainPageStoryId.default :
					this
					.jumpGirlMainPageStoryId



				this.roomType = paramsJson.roomType && paramsJson.roomType
					.default ?
					paramsJson
					.roomType.default :
					this
					.roomType
				this.jumpAccomplishmentStoryId = paramsJson.jumpAccomplishmentStoryId && paramsJson
					.jumpAccomplishmentStoryId
					.default ?
					paramsJson
					.jumpAccomplishmentStoryId.default :
					this
					.jumpAccomplishmentStoryId

				this.gameMode = paramsJson.gameMode && paramsJson
					.gameMode
					.default ?
					paramsJson
					.gameMode.default :
					this
					.gameMode


			},
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			// 新方法
			// 为了方便调试弄一个获取卡牌数据的测试方法
			handleTestGetRoomCardDetail() {
				let gameId = this.globalGameCtx.gameId
				let cardId = "1881255621877899265"
				this.getRoomCardDetail({
					gameId,
					cardId
				})
			},
			handleGetMyCardDetail(cardId) {
				return new Promise((resolve, reject) => {
					let gameId = this.globalGameCtx.gameId
					getMyCardDetail({
						gameId,
						cardId
					}).then(res => {
						let result = res.data.result
						this.dancePowerInfo = result.infoJson.level
						resolve(true)
					}).catch(err => {
						reject(false)
					})
				})

			},
			handleGetCardList() {
				let gameId = this.globalGameCtx.gameId
				getMyCardList({
					gameId,
					locked: false
				}).then(res => {
					let result = res.data.result
					this.cardList = [...result].map((item, index) => {
						let obj = {
							...item
						}
						obj.image = item.coverUrl
						obj.start = item.star
						obj.RarityLevel = item.cardRare
						obj.name = item.cardName

						// // 标记当前卡牌
						// if (item.id == this.myRoleCard.id) {
						// 	this.actGirlCardIndex = index
						// 	this.actGirlCard = obj
						// 	// 获取卡牌升级详情数据
						// 	this.handleGetMyCardDetail(item.id)
						// }

						return obj

					})


					// 标记当前卡牌
					// this.cardList.forEach((item, index) => {
					// 	if (item.id == myRoleCard.id) {
					// 		this.actGirlCardIndex = index
					// 		this.actGirlCard = item
					// 	}
					// })



				})
			},
			handleGirlCardItemClick(item, index) {
				this.actGirlCard = item
				this.actGirlCardIndex = index

				this.handleGetMyCardDetail(item.id)

				// 测试内容
				// let gameId = this.globalGameCtx.gameId
				// let cardId = item.id
				// this.getRoomCardDetail({
				// 	gameId,
				// 	cardId
				// }).then(res => {
				// 	console.log("请求成功");
				// }).catch(err => {
				// 	console.log("请求失败");
				// })


			},
			handleFunGameJumpBack() {
				this.isStartGame = false
			},
			handleFunGameResult(data) {
				if (isNumber(data)) {
					this.$refs.pkVideo.seekEvent(data)
				}
			},
			playVideo() {
				this.$refs.pkVideo.playVideo();
			},
			pauseVideo() {
				this.$refs.pkVideo.pauseVideo();
			},
			handleKeyBoardHeightChange(e) {
				if (e.detail.height) {
					let rpxHeight = this.pxToRpx(e.detail.height)
					this.keyboardHeight = rpxHeight
				} else {
					this.keyboardHeight = -90
				}

				console.log(this.keyboardHeight, '键盘高度发生变化');
			},
			inputConfirmMessage() {
				console.log("发送消息");
				this.inputMsg = ""
				this.inputIsFocus = false
			},
			inputBlur() {
				console.log("失去焦点");
				this.inputIsFocus = false
				this.keyboardHeight = -90
			},
			inputFocus() {
				console.log("获得焦点");
			},
			handlePkBtnsClick(item, index) {
				if (item.key == 'more') {
					this.handleOpenPop()
				}
				let key = item.key
				switch (key) {
					case 'more':
						this.popType = item.key
						this.handleOpenPop('more')
						break;
					case 'input':
						this.handleInputClick()
						break;
					case 'message':
						if (this.chartStoryId) {
							this.$emit("getGameResult", this.chartStoryId)
						}
						break;
					case 'update':
						this.popType = item.key
						if (!this.dancePowerInfo) {
							this.cardList.forEach((item, index) => {
								if (item.id == this.myRoleCard.id) {
									this.actGirlCardIndex = index
									this.actGirlCard = item
									// 获取卡牌升级详情数据
									this.handleGetMyCardDetail(item.id).then(res => {
										this.handleOpenPop()
									})
								}
							})
						} else {
							this.handleOpenPop()
						}


						break;
					case 'gift':
						if (this.$refs.mGiftPop) {
							this.$refs.mGiftPop.open()
						}
						break;
					case 'dance':
						break;
					case 'start-game':
						if (this.startGameClicked) {
							return
						}
						this.startGameClicked = true
						if (this.$refs.mFunGame && this.$refs.pkVideo) {
							let intervalId = setInterval(() => {
								if (this.$refs.pkVideo.canPlay) {
									this.isStartGame = true
									this.playVideo()
									this.$refs.mFunGame.handleStartGame('start')
									this.startGameClicked = false
									clearInterval(intervalId)
								}
							}, 500)
						}
						break;

					default:
						break;
				}
			},
			handleInputClick() {
				this.inputIsFocus = true
			},
			// pk视频相关方法
			onEnded(e) {
				if (this.$refs.mFunGame) {
					this.$refs.mFunGame.handleGameTimeOver()
				}
			},
			onTimeUpdate(e) {
				if (this.isStartGame) {
					this.duration = e.detail.duration
					this.currentTime = e.detail.currentTime;
				}

			},
			onPlay(e) {},
			//旧方法
			handleOpenPop() {
				if (this.$refs.mPop) {
					this.$nextTick(() => {
						this.$refs.mPop.open()
					})
				}
			},
			handleDressUpClothes() {
				if (!this.actPopItem.isDefault && !this.actPopItem.locked) {
					this.fDataList.forEach((item, index) => {
						if (this.actGirlFragMentIndex == index) {
							item.isDefault = true
						} else {
							item.isDefault = false
						}
					})
				}
			},
			handlePopItemClick(item, index) {
				this.actPopItem = item
				this.actGirlFragMentIndex = index
				if (!item.locked) {
					this.$emit("getGameResult", item.seekTime)
				}
			},
			handleJumpMain() {
				console.log("点击");
				if (this.jumpGirlMainPageStoryId) {
					this.$emit('getGameResult', String(this.jumpGirlMainPageStoryId))
				}
			},
			handleModalResult(data) {
				if (data.type == 'toLive') {
					if (this.jumpLiveStoryId) {
						this.$emit('getGameResult', String(this.jumpLiveStoryId))
					}
				} else if (data.type == 'notEnough') {
					this.tipText = "心动值不足"
					this.showTip = true
					if (this.tipTimeOutId) {
						clearInterval(this.tipTimeOutId)
					}

					this.tipTimeOutId = setTimeout(() => {
						this.showTip = false
					}, 1000)

				} else if (data.type == 'jumpStory') {
					if (data.storyId) {
						if (!String(this.storyId).includes(data.storyId)) {
							this.$emit('getGameResult', String(data.storyId))
						}
						this.$refs.mModal.close()
					}
				}
			},
			handleChangePeopleClick() {
				// if (this.jumpRoomListStoryId) {
				// 	this.$emit("getGameResult", this.jumpRoomListStoryId)
				// }
				if (this.$refs.mModal) {
					this.$refs.mModal.open('roomList', '舞姬房间')
				}
			},
			handleCountDownEnd() {

			},
			handleBtnPopResult(e) {
				if (e.type == 'seek' || e.type == 'jumpStory') {
					this.$emit("getGameResult", e.data)
				} else if (e.type == 'locked') {
					this.tipText = "敬请期待"
					this.showTip = true
					if (this.tipTimeOutId) {
						clearInterval(this.tipTimeOutId)
					}

					this.tipTimeOutId = setTimeout(() => {
						this.showTip = false
					}, 1000)

				}
			},
			handleBottomBtnClick(item, index) {
				if (item.locked) {
					this.tipText = "敬请期待"
					this.showTip = true
					if (this.tipTimeOutId) {
						clearInterval(this.tipTimeOutId)
					}

					this.tipTimeOutId = setTimeout(() => {
						this.showTip = false
					}, 1000)
					return
				}

				this.handleBtnClick(item.type)
			},
			handleGoRoom() {
				this.roomBtnClicked = true
				setTimeout(() => {
					this.roomBtnClicked = false
				}, 500)

				if (this.jumpOutStoryId) {
					this.$emit("getGameResult", String(this.jumpOutStoryId))
				}
			},
			handleBtnClick(type) {
				switch (type) {
					case 'accompany':
						if (this.jumpAccompanyStoryId) {
							this.$emit('getGameResult', String(this.jumpAccompanyStoryId))
						}
						break;
					case 'date':
						if (this.jumpDateStoryId) {
							this.$emit('getGameResult', String(this.jumpDateStoryId))
						}
						break;
					case 'change':
						if (this.jumpChangeStoryId) {
							this.$emit('getGameResult', String(this.jumpChangeStoryId))
						}
						break;
					case 'scene':

						if (this.jumpSceneStoryId) {
							this.$emit('getGameResult', String(this.jumpSceneStoryId))
						}
						break;
					case 'dressup':
						if (this.jumpDressUpStoryId) {
							this.$emit('getGameResult', String(this.jumpDressUpStoryId))
						}
						break;
					case 'live':
						// if(this.jumpLiveStoryId){
						// 	this.$emit('getGameResult', String(this.jumpLiveStoryId))
						// }

						if (this.$refs.mModal) {
							this.$refs.mModal.open('live')
						}
						break;
					case 'gift':
						if (this.$refs.mGiftPop) {
							this.$refs.mGiftPop.open()
						}
						break;
					case 'dynamics':
						this.handleJumpMain()
						break;
					case 'accomplishment':
						if (this.jumpAccomplishmentStoryId) {
							this.$emit('getGameResult', String(this.jumpAccomplishmentStoryId))
						}
						break;
					default:
						break;
				}

			}
		}



	}
</script>

<style lang="scss" scoped>
	.m-room {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 999999999;


		.m-room-default-box {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.m-room-box-new {
			position: relative;
			width: 100%;
			height: 100%;

			.room-top-info {
				position: absolute;
				width: 100%;
				height: 80rpx;
				left: 0rpx;
				// padding: 0rpx 80rpx;
				padding-left: 80rpx;
				z-index: 999;
				pointer-events: none;

				.top-info-avatar {
					position: relative;
					width: 80rpx;
					height: 80rpx;
					background-color: pink;
					border-radius: 50%;
					margin-right: 20rpx;
					pointer-events: fill;

					.top-info-avatar-img {
						border-radius: 50%;
					}

				}

				.top-info-content {
					flex: 1;
					height: 100%;

					.top-info-name {
						width: 100%;
						font-size: 24rpx;
						line-height: 24rpx;
						font-weight: 700;
						color: #fff;
						text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
						margin-bottom: 30rpx;

						.top-info-name-text {
							pointer-events: fill;
						}
					}

					.top-info-heart-num {
						width: 100%;

						.info-heart-progress {
							position: relative;
							width: 200rpx;
							height: 15rpx;
							border-radius: 10rpx;
							background-color: rgba(255, 255, 255, .6);
							padding: 2rpx;
							pointer-events: fill;

							.heart-progress-inner {
								height: 100%;
								background-image: linear-gradient(to right, rgba(253, 59, 87, 1)0%, rgba(253, 204, 170, 1)100%);
								border-radius: 10rpx;
								transition: width 0.3s linear;
							}

						}

						.heart-progress-text {
							position: absolute;
							left: 0rpx;
							top: -4rpx;
							transform: translateY(-100%);
							width: 100%;
							height: 20rpx;
							font-size: 16rpx;
							line-height: 16rpx;
							color: rgba(255, 255, 255, 1);
							text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

						}
					}



				}

				.info-heart-icon {
					position: absolute;
					right: -6rpx;
					bottom: -4rpx;
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
					z-index: 9;

					.heart-num {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						font-size: 20rpx;
						line-height: 20rpx;
						color: #fff;
						font-weight: 400;
					}

				}




			}

			.pk-sort-btn {
				position: absolute;
				left: 20rpx;
				width: 100rpx;
				height: 34rpx;
				background-color: rgba(0, 0, 0, .3);
				border-radius: 18rpx;
				box-sizing: content-box;
				padding: 0rpx 10rpx;

				.pk-sort-icon {
					width: 30rpx;
					height: 30rpx;
				}

				.pk-sort-btn-list {
					flex: 1;
					height: 100%;
					color: #fff;
					font-size: 18rpx;
					color: #fff;
					line-height: 18rpx;

					.sort-btn-item {
						width: 100%;
						height: 100%;
					}
				}

			}

			.input-fly-box {
				position: absolute;
				left: 0rpx;
				width: 100%;
				height: 90rpx;
				background-color: #fff;
				z-index: 99999;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				// transition: bottom 0.1s;
				bottom: -80rpx;


				.fly-input-box {
					flex: 1;
					height: 65rpx;
					border-radius: 33rpx;
					background-color: rgba(0, 0, 0, .1);
					margin-right: 20rpx;
					overflow: hidden;
					box-sizing: border-box;
					padding: 10rpx 20rpx;

					.fly-input-control {
						flex: 1;
						height: 100%;
						background-color: transparent;
						font-size: 24rpx;
						color: #393939;
						line-height: 24rpx;
					}
				}


				.send-btn {
					height: 55rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					text-align: center;
					border-radius: 30rpx;
					padding: 0rpx 20rpx;
					color: #fff;
					background-color: #f72f54;
				}

				.empty-value {
					opacity: 0.4;
				}
			}

			.pk-functions-box {
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				width: 100%;
				// height: 80rpx;
				height: 130rpx;
				z-index: 10;
				padding: 0rpx 30rpx;



				.pk-btns {
					width: 100%;
					height: 100%;

					.pk-btn-item {
						margin-right: 15rpx;

						.pk-btn-item-default {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							background-color: rgba(0, 0, 0, .2);
							// box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, 1);
							border: 2rpx solid rgba(255, 255, 255, .1);

						}

						&:last-child {
							margin-right: 0rpx;
						}

						.pk-btn-item-icon {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.pk-input {
						flex: 1;
						height: 65rpx;
						border-radius: 33rpx;
						background-color: rgba(0, 0, 0, .2);

						// margin-right: 20rpx;
						.input-control {
							flex: 1;
							height: 100%;
							background-color: transparent;
							font-size: 24rpx;
							color: rgba(255, 255, 255, .8);
							line-height: 24rpx;
							padding: 0rpx 20rpx;
						}
					}

					.start-game {
						flex: 1;
						height: 70rpx;
						border-radius: 35rpx;
						background-color: rgba(0, 0, 0, .2);
						border: 2rpx solid rgba(255, 255, 255, .1);

						.start-game-content {
							font-size: 26rpx;
							line-height: 26rpx;
							font-weight: 700;
							color: #fff;

							.start-game-content-text {
								margin-left: 10rpx;
								letter-spacing: 2rpx;
								text-shadow: 0rpx 0rpx 4rpx #9366eb;
							}
						}

					}

					.hide-function-btn {
						display: none;
					}
				}
			}



			.pk-video-box {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0rpx;
				top: 0rpx;
				z-index: 9;
				opacity: 0;
				pointer-events: none;
			}

			.pk-component {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0rpx;
				top: 0rpx;
				z-index: 11;
				opacity: 0;
				overflow: hidden;
			}

			.pk-show {
				opacity: 1;
			}

		}


		.leave-btn {
			bottom: 200rpx;
		}

		.room-pop {
			width: 100%;
			height: 100%;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			background-color: rgba(255, 255, 255, 0);
			backdrop-filter: blur(15rpx);

			.girls-control-list {
				width: 100%;

				// height: 270rpx;
				.girl-fragment-item {
					position: relative;
					box-sizing: border-box;
					display: inline-block;
					width: 142.5rpx;
					height: 254rpx;
					margin-right: 2rpx;
					border-radius: 8rpx;
					border: 2rpx solid transparent;
					overflow: hidden;

					.dressuped-icon {
						position: absolute;
						right: 5rpx;
						top: 5rpx;
						width: 30rpx;
						height: 30rpx;
						z-index: 9;
					}

					&:first-child {
						margin-left: 10rpx;
					}

					&:last-child {
						margin-right: 10rpx;
					}

					.locked-masker {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, .3);
						display: flex;
						justify-content: center;
						align-items: center;

						.locked-icon {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.item-content {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
						overflow: hidden;

						.item-image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
							object-fit: cover;
						}

						.btnClickScale {
							animation: selecteAni 0.2s linear;
						}

						@keyframes selecteAni {

							0% {
								transform: scale(1);
							}


							50% {
								transform: scale(1.2);
							}

							100% {
								transform: scale(1);
							}

						}


					}

					.name {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 35rpx;
						font-size: 20rpx;
						font-weight: 700;
						line-height: 35rpx;
						color: #fff;
						text-align: center;
						text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
						background-color: rgba(0, 0, 0, .3);
						border-radius: 0rpx 0rpx 8rpx 8rpx;

					}

				}


				.act-girl-fragment {
					border-color: #fff;
				}
			}

			.pop-bottom-btns {
				width: 100%;
				height: 50rpx;
				font-size: 24rpx;
				font-weight: 700;
				line-height: 24rpx;

				margin-top: 20rpx;

				.pop-btn-item {
					width: 250rpx;
					height: 100%;
					border-radius: 5rpx;
					background-image: linear-gradient(to right, #f3f1c6, #efcf80);
					color: #b27439;
					box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .3);
				}

				.pop-btn-dressed {
					background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
					color: #646369;
				}
			}

		}

		.room-private-pop {
			width: 100%;
			height: 100%;
			box-sizing: border-box;


			.room-more-pop {

				padding-top: 30rpx;

				.more-btn-list {
					width: 750rpx;
					padding: 10rpx 60rpx;
					flex-wrap: wrap;

					.more-btn-item {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						background-color: rgba(0, 0, 0, .1);
						margin-right: 50rpx;
						border-radius: 20rpx;
						margin-bottom: 60rpx;

						.more-btn-item-img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 20rpx;
						}


						&:nth-child(4n) {
							margin-right: 0rpx;
						}

						.more-btn-item-name {
							position: absolute;
							left: 0rpx;
							bottom: -40rpx;
							width: 100%;
							height: 30rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #000;
							text-align: center;
						}

					}
				}
			}

			.room-update-pop {
				width: 100%;
				padding: 0rpx 20rpx;

				.update-top {
					width: 100%;
					color: #393939;
					margin-top: 40rpx;

					.update-level {
						font-size: 24rpx;
						line-height: 24rpx;
						margin-right: 30rpx;

						.update-level-tip {
							font-weight: 700;
							margin-right: 10rpx;
						}

						.update-level-content {

							.update-level-now {
								font-size: 45rpx;
								font-weight: 700;
								margin: 0rpx 10rpx;
							}

						}
					}

					.update-progress {
						flex: 1;
						height: 100%;

						.update-progress-text {
							width: 100%;
							font-size: 24rpx;
							line-height: 24rpx;
							margin-bottom: 15rpx;

							.tip-text {
								font-weight: 700;
							}

						}

						.update-progress-content {
							width: 100%;
							height: 12rpx;
							background-color: rgba(0, 0, 0, .1);
							border-radius: 6rpx;
							overflow: hidden;

							.update-progress-inner {
								width: 20%;
								height: 100%;
								border-radius: 6rpx;
								background-color: #9366eb;
								box-shadow: 0rpx 0rpx 2rpx #fff;
								transition: width 0.3s linear;
							}

						}
					}
				}

				.update-card-list {
					width: 100%;
					height: 200rpx;
					padding: 0rpx 10rpx;
					margin-top: 30rpx;

					.update-card-list-content {
						height: 100%;

						.update-card-item {
							position: relative;
							width: 120rpx;
							height: 180rpx;
							border-radius: 10rpx;
							overflow: hidden;
							margin-right: 10rpx;
							flex-shrink: 0;
							background-color: #fff;

							.no-choosed-masker {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								z-index: 9999;
								background-color: rgba(0, 0, 0, .5);
							}

							.dance-girls-item-content {

								.rarity-level {
									position: absolute;
									left: 4rpx;
									top: 5rpx;
									width: 60rpx;
									height: 30rpx;
									z-index: 10;
								}

								.card-level {
									position: absolute;
									right: 4rpx;
									top: 5rpx;
									font-size: 20rpx;
									line-height: 20rpx;
									color: #fff;
									z-index: 999;

									.card-level-icon {
										font-size: 16rpx;
										line-height: 16rpx;
									}
								}

								.start-box {
									padding-left: 0rpx;
								}
							}

							.locked-masker {
								.locked-tip {
									height: 30rpx;
									font-size: 20rpx;
									line-height: 20rpx;
								}
							}


						}
					}
				}

				.update-consume {
					width: 100%;
					margin-top: 20rpx;

					.update-consume-tip {
						width: 100%;
						height: 40rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #393939;

						&::before {
							content: "";
							width: 5rpx;
							height: 20rpx;
							background-color: #9366eb;
							margin-right: 10rpx;
						}

					}

					.update-consume-content {
						width: 100%;

						.update-conusem-inner {
							width: 480rpx;

							.n-reward-list {
								padding: 0rpx;
							}
						}

						.update-btn-box {
							flex: 1;
							height: 100rpx;
							margin-left: 10rpx;

							.update-btn-content {
								width: 180rpx;
								height: 60rpx;
								border-radius: 5rpx;
								font-size: 24rpx;
								line-height: 24rpx;
								background-image: linear-gradient(to right, #f3f1c6, #efcf80);
								color: #b27439;
								font-weight: 700;
								box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
							}


						}

					}
				}


			}

			.pop-default {
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				overflow: hidden;
			}
		}

		.change-people {
			position: absolute;
			left: 64rpx;
			top: 100rpx;
			height: 50rpx;
			box-sizing: border-box;
			z-index: 9;

			.heart-icon {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;

				.heart-icon-img {
					width: 100%;
					height: 100%;
				}

				.heart-num {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 16rpx;
					line-height: 16rpx;
					color: #fff;

				}
			}

			.name-box {
				position: relative;
				height: 100%;
				font-size: 24rpx;
				line-height: 50rpx;
				color: #fff;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 15rpx;
				padding-right: 15rpx;
				text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .6);

				.line-box {
					position: absolute;
					right: 0rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 2rpx;
					height: 20rpx;
					background-color: rgba(255, 255, 255, .6);
					opacity: 0.6;
				}

			}



			.change-people-icon {
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .1);
				display: flex;
				justify-content: center;
				align-items: center;

				box-shadow: inset 0rpx 0rpx 6rpx #fff;

				.change-people-icon-img {
					width: 50%;
					height: 50%;
				}

			}
		}

		.bottom-btn {
			position: absolute;
			left: 0rpx;
			bottom: 40rpx;
			width: 100%;
			height: 126rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9;
			pointer-events: fill;

			.scroll-content {
				width: 580rpx;
				height: 100%;
			}

			.btn-item {
				position: relative;
				display: inline-block;
				width: 70rpx;
				height: 70rpx;
				margin: 2rpx 0rpx;
				pointer-events: fill;
				border-radius: 50%;
				margin-top: 28rpx;

				margin-right: 30rpx;
				box-shadow: 0rpx 0rpx 1rpx rgba(255, 255, 255, .6);


				&:first-child {
					margin-left: 2rpx;
				}

				&:last-child {
					margin-right: 0rpx;
				}

				.btn-item-content {
					position: relative;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}

				.locked-masker {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					width: 100%;
					height: 100%;
					z-index: 9;
					border-radius: 50%;

					.locked-img {
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						width: 20rpx;
						height: 20rpx;
					}
				}





				.btn-name {
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					width: 100%;
					font-size: 12rpx;
					line-height: 30rpx;
					text-align: center;
					color: #fff;

					display: flex;
					justify-content: center;
					align-items: center;
				}

				.livingName {
					// color: #fc1f6e;
					background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(252, 31, 110, .7));
				}

				.icon {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 85%;
					height: 85%;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon-img {
						width: 100%;
						height: 100%;
					}

					.bling {
						animation: bling 1s infinite;
					}

					@keyframes bling {
						0% {
							transform: scale(1);
						}

						50% {
							transform: scale(0.9);
						}

						100% {
							transform: scale(1);
						}
					}
				}


			}

		}





	}
</style>